<template>
	<v-content ref="content">
		<v-statusbar class="status-bar"></v-statusbar>
		<div class="header padding">
			<div class="title">首页</div>
			<!-- <image class="search" src="/static/image/icon-search.png"></image> -->
		</div>

		<div class="banner" v-if="bannerList.length">
			<u-swiper
				:list="bannerList"
				previousMargin="47rpx"
				nextMargin="47rpx"
				circular
				radius="5"
				bgColor="#ffffff"
				interval="5000"
				@change="onSwiperChange"
			></u-swiper>
			<div class="dot">
				<div
					class="item"
					:class="[
						{
							active: index == bannerCurrent,
						},
					]"
					v-for="(_item, index) in bannerList"
					:key="index"
				></div>
			</div>
		</div>

		<template v-if="article.list.length">
			<div class="article-title padding">
				推荐课程
				<div class="more" @click="refreshArticle" v-if="article.total > 4">
					<image src="/static/image/icon-refresh.png" class="icon"></image>
					换一换
				</div>
			</div>

			<div class="article-list padding">
				<div
					class="item"
					v-for="(item, index) in article.list"
					:key="index"
					@click="toPage('/pages/learn/details', { id: item.id })"
				>
					<div class="image-wrap">
						<image class="image" :src="item.coverImg" mode="aspectFill"></image>
						<!-- <div class="tip new">最新</div> -->
					</div>
					<div class="title">{{ item.courseName }}</div>
					<div class="message">{{ item.totalMembers || 0 }}人学过</div>
				</div>
				<div class="item"></div>
			</div>
		</template>

		<div class="notice margin" v-if="notice.length" @click="toExamPage">
			<image class="image" src="/static/image/index/notice.jpeg" mode="widthFix"></image>
			<div class="name">
				<u-notice-bar :text="noticeText" icon="" direction="row" bgColor=""></u-notice-bar>
			</div>
		</div>
		<template v-if="onlineExam.list.length">
			<div class="article-title padding">
				在线考试
				<div class="more arrow-right" @click="toPage('/pages/exam/index', { current: 0 }, 'tabbar')">
					查看更多
				</div>
			</div>

			<div class="examination margin" v-for="(item, index) in onlineExam.list" :key="index" @click="toExam(item)">
				<div class="title">
					<image class="icon" src="/static/image/icon-hot.png"></image>
					<div class="name">{{ item.examName }}</div>
					<div class="button">
						<image class="image" src="/static/image/icon-badge.png"></image>
						{{ item.totalScore }}分
					</div>
				</div>
				<div class="message">
					<div class="tip padding">{{ item.examEndTime }} 截止</div>
					{{ item.answeredNum || 0 }}人已考试
				</div>
			</div>
		</template>

		<v-tabbar></v-tabbar>
	</v-content>
</template>

<script>
import mixins from "@/mixins"

export default {
	name: "index",
	mixins: [mixins],
	data() {
		return {
			notice: [],
			bannerList: [],
			bannerCurrent: 0,

			article: {
				list: [],
				page: 1,
				total: 0,
			},
			onlineExam: {
				list: [],
				total: 0,
				page: 1,
			},
			isLoadMore: false,
		}
	},
	computed: {
		noticeText() {
			return `${this.notice[0].examName}考试将于${this.notice[0].examStartTime}开始`
		},
	},
	methods: {
		init() {
			this.getBanner()
			this.getArticle()
			this.getOnlineExam()
			this.getNotice()
		},
		async getBanner() {
			const data = await this.$axios.get("/api/system/castleBanner/list")
			this.bannerList = data.map(item => item.bannerUrl)
		},
		async getArticle() {
			const { records, total } = await this.$axios.get("/api/study/course/studyCourse/page", {
				isRecommend: 1,
				currentPage: this.article.page,
				size: 4,
			})
			this.article.list = records
			this.article.total = total
		},
		async getNotice() {
			const notice = await this.$axios.get("/api/study/exam/studyExam/list/toRemind", {})
			this.notice = notice
		},
		refreshArticle() {
			if (this.article.page * 4 >= this.article.total) {
				this.article.page = 1
			} else {
				this.article.page++
			}

			this.getArticle()
		},

		onSwiperChange({ current }) {
			this.bannerCurrent = current
		},

		async getOnlineExam() {
			const { records, total } = await this.$axios.get("/api/study/exam/studyExam/page/unanswered", {
				currentPage: this.onlineExam.page,
				size: 10,
			})
			this.onlineExam.list = this.onlineExam.list.concat(records)
			this.onlineExam.total = total
			// console.log(this.onlineExam.list)
		},

		toExam(item) {
			if (item.examEndTime) {
				if (new Date() > new Date(item.examEndTime)) {
					this.showMessage.error("考试已截止")
					return
				}
			}
			if (item.status == 3) {
				this.toPage("/pages/exam/result", { id: item.recordId })
			} else {
				this.toPage("/pages/exam/start", { id: item.id })
			}
		},
		toExamPage() {
			window.sessionStorage.setItem("examCurrent", 0)
			this.toPage("/pages/exam/index", "tabbar")
		},
	},
	onReachBottom() {
		if (this.onlineExam.total > this.onlineExam.list.length) {
			this.isLoadMore = true
			this.onlineExam.page += 1
			this.getOnlineExam()
		}
	},
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";

.examination {
	border-bottom: 1px solid #f7f7f7;
	padding-bottom: 24rpx;
	.title {
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.icon {
			width: 30rpx;
			height: 40rpx;
			display: block;
			margin-right: 10rpx;
			flex: none;
		}
		.name {
			font-size: 32rpx;
			color: #333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right: 20rpx;
		}
		.button {
			width: 126rpx;
			height: 55rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			border-radius: 1000px;
			background-image: linear-gradient(to right, #fea110, #ff800e);
			font-size: 24rpx;
			margin-left: auto;
			.image {
				width: 30rpx;
				height: 35rpx;
				margin-right: 10rpx;
			}
		}
	}
	.message {
		color: #888888;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tip {
			background: #f7f7f7;
			color: #b0b0b0;
			line-height: 50rpx;
		}
	}
}

.notice {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fef4db;
	border-radius: 10rpx;
	padding-inline: 20rpx;
	.image {
		flex: none;
		width: 130rpx;
		height: 40rpx;
	}
	.name {
		font-size: 28rpx;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #ee9338;
	}
}
</style>
